import React, { Component } from 'react'
import axios from '../utils/request'
import * as echarts from 'echarts'
import '../App.css'
import {
    LeftOutlined,
    RightOutlined,
} from '@ant-design/icons';
import { Carousel, Tabs } from 'antd';
import ReactEcharts from 'echarts-for-react';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([GridComponent, BarChart, CanvasRenderer]);
const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};
const { TabPane } = Tabs;
function callback(key) {
    console.log(key);
}
//血压
const option1 = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [79, 103, 88, 89, 110, 107, 132],
        type: 'line'
    }]
};
//血糖图
const option2 = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [3.9, 2.5, 4.7, 5.3, 7.4, 6.9, 3.2],
            type: 'line',
            smooth: true
        }
    ]
};
//步数图
const option3 = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [1200, 4335, 3442, 7654, 14552, 8689, 32545],
            type: 'line',
            smooth: true
        }
    ]
};
export default class File extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            list: [],
        }
    }

    componentDidMount() {
        this.initCharts();
        this.getList();
    }

    getList() {
        axios({
            url: '/onelist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    initCharts = () => {
        let myChart = echarts.init(document.getElementById('myChart'));
        let option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [80, 87, 94, 125, 105, 117, 125],
                    type: 'line'
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    goback() {
        this.props.history.go(-1)
    }
    one() {
        this.props.history.push('/one')
    }
    render() {
        const { list } = this.state
        return (
            <div className='file'>
                <div className='file_header'>
                    <li onClick={() => this.goback()}><LeftOutlined />返回</li>
                    <li>健康档案</li>
                    <li></li>
                </div>
                <div className='file_main'>
                    <div className='file_swiper'>
                        <Carousel autoplay>
                            <div className='file_swiper_one'>
                                <li><span>测试名字</span><span>自己</span></li>
                                <li><span>女&nbsp;23岁</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>编辑档案<RightOutlined /></span></li>
                            </div>
                            <div className='file_swiper_two'>
                                <span onClick={() => this.one()}>+创建健康档案</span>
                            </div>
                        </Carousel>
                    </div>

                    <div className='file_eacharts'>
                        <Tabs onChange={callback} type="card" tabBarStyle={{ color: "#666666" }} className='tabs'>
                            <TabPane tab="体重" key="1" tabBarStyle={{ background: "#F6FDF7", border: "1px solid #3ACF67" }} className='tabs_tabpane'>
                                <div className="chart">
                                    <div id="myChart"></div>
                                </div>
                            </TabPane>
                            <TabPane tab="血压" key="2" tabBarStyle={{ background: "#F6FDF7", border: "1px solid #3ACF67" }} className='tabs_tabpane1'>
                                <ReactEcharts option={option1} style={{ height: '300px', width: '100%' }} />
                            </TabPane>
                            <TabPane tab="血糖" key="3" tabBarStyle={{ background: "#F6FDF7", border: "1px solid #3ACF67" }} className='tabs_tabpane2'>
                                <ReactEcharts option={option2} style={{ height: '300px', width: '100%' }} />
                            </TabPane>
                            <TabPane tab="步数" key="4" tabBarStyle={{ background: "#F6FDF7", border: "1px solid #3ACF67" }} className='tabs_tabpane3'>
                                <ReactEcharts option={option3} style={{ height: '300px', width: '450px' }} />
                            </TabPane>
                        </Tabs>
                    </div>
                    <div className='file_tabs'>
                        <Tabs defaultActiveKey="1" centered>
                            <TabPane tab="咨询记录" key="1">
                                {
                                    list.length && list.map((item, index) => {
                                        return <div className='tabpan' key={index}>
                                            <li><span>身份证号:{item.number}</span><span>吸烟史:{item.smoke}</span></li>
                                            <li><span>身高:{item.stature}</span><span>体重:{item.weight}</span></li>
                                            <li><span>BMI:{item.BMI}</span><span>腰围:{item.waistline}</span></li>
                                        </div>
                                    })
                                }
                            </TabPane>
                            <TabPane tab="电子病历夹" key="2">
                                Content of Tab Pane 2
                            </TabPane>
                            <TabPane tab="健康报告" key="3">
                                Content of Tab Pane 3
                            </TabPane>
                            <TabPane tab="会员服务" key="4">
                                Content of Tab Pane 4
                            </TabPane>
                        </Tabs>
                    </div>
                </div>
            </div>
        )
    }
}
